<template>
    <div class="bannerAdd">
        <el-radio-group v-model="type" @input="resetHandler('bannerUpload')">
            <el-radio-button label="在线上传"></el-radio-button>
            <el-radio-button label="本地上传"></el-radio-button>
        </el-radio-group>
        <el-form class="uploadBanner" ref="bannerUpload" label-position="right" label-width="80px" :model="form">
            <template v-if="type=='在线上传'">
                <el-form-item label="地址" prop="img" :rules="[{ required: true, message: '请传入图片地址', triggle: 'blur' }]" key="line">
                    <el-input v-model="form.img"></el-input>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="地址" prop="img"  key="local">
                <el-upload ref="upload" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :auto-upload="false" drag show-file-list :on-change="selectImgChange">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                </el-form-item>
            </template>

            <el-form-item label="提示信息" prop="alt" :rules="[{ required: true, message: '请传入提示信息', triggle: 'blur' }]">
                <el-input v-model="form.alt"></el-input>
            </el-form-item>
            <el-form-item label="图片链接" prop="link" :rules="[{ required: true, message: '请传入链接地址', triggle: 'blur' }]">
                <el-input v-model="form.link"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitHandler('bannerUpload')">提交</el-button>
                <el-button type="info" @click="resetHandler('bannerUpload')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addBannerAPI } from "@/api/banner"
import fileTobase64 from "@/utils/fileToBase64";

export default {
    name: "BannerAddView",
    data() {
        return {
            form: {
                img: "",
                alt: "",
                link: "",
            },
            type:"在线上传",
        }
    },
    methods: {
        async selectImgChange(info) {
            // info => 图片信息 {name,size,status,uid,raw:文件对象}
            // console.log("选择的图片发生了改变",info);

            // 将file对象转为base64 
            // const fileReader = new FileReader();
            // fileReader.readAsDataURL(info.raw)
            // fileReader.onload = function () {
            //     console.log(this.result);
            // }
            // fileReader.onerror = function(){
            // }

            try {
                var base64Url = await fileTobase64(info.raw);
                console.log("base64", base64Url);
                this.form.img = base64Url;
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        submitHandler(formName) {
            this.$refs[formName].validate(async (bool) => {
                if (bool) {
                    try {
                        var res = await addBannerAPI(this.form);
                        console.log("res", res);
                        this.$message({
                            type: "success",
                            message: "上传成功"
                        })
                        if (this.$refs["upload"]) {
                            this.$refs["upload"].clearFiles();
                        }
                        this.$refs[formName].resetFields();
                    } catch (err) {
                        this.$message.error(err.message);
                    }
                }
            });
        },
        resetHandler(formName) {
            console.log("1111", this.$refs[formName]);
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.uploadBanner {
    width: 600px;
    margin-top: 20px;
}
</style>